<template>
    <div class="result-container">
       <div class="title_wrap">
          <h2>{{$route.query.keywords}}</h2>
          <span>{{total}}</span>         
       </div>
       <!--tabs标签页-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲" name="1" class="pane1">
             <!--tab表格--> 
            <el-table :data="resultList" style="width: 100%">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="音乐标题" width="300">
                  <template slot-scope="scope">
                     <span @click="playMise(scope.row.id)">{{scope.row.name}}</span>
                     <span v-if="scope.row.mvid !=0" class="el-icon-video-camera active"></span>
                  </template>
              </el-table-column>
              <el-table-column prop="artists[0].name" label="歌手" width="180"></el-table-column>
              <el-table-column prop="album.name" label="专辑" width="480"></el-table-column>
              <el-table-column label="时长" width="80">
                <template slot-scope="scope">
                   {{scope.row.duration | formatDuration}}
                </template>
              </el-table-column>
            </el-table>  
        </el-tab-pane>
        <el-tab-pane label="歌单" name="1000" class="pane2">
              <div class="items">
                 <div class="item" v-for="item in songList" :key="item.id" @click="toPlaylist(item.id)">
                   <div class="img_box">
                     <div class="img_text"> 播放量: <span>{{item.playCount | formatCount}}</span></div>
                     <img :src="item.coverImgUrl" alt="">
                     <p class="el-icon-caret-right"></p>
                   </div>
                   <div class="text">{{item.name}}</div>
                 </div>
              </div>                                                                                      
        </el-tab-pane>
        <el-tab-pane label="MV" name="1004" class="pane3">
            <div class="items">
               <div class="item" v-for="item in mvList" :key="item.id" @click="playMv(item.id)">
                  <div class="img_box">
                   <div class="img_text el-icon-caret-right"><span>{{item.playCount | formatCount}}</span></div>
                    <img :src="item.cover" alt="">
                    <p class="el-icon-caret-right"></p>
                    <span class="sp1">{{item.duration | formatDuration}}</span>
                  </div>
                  <div class="text">
                    <p class="name">{{item.name}}</p>
                    <p class="singer">{{item.artistName}}</p>
                  </div>
               </div>
            </div>
        </el-tab-pane>
    </el-tabs>  
    <!-- 分页器 --> 
    <el-pagination
      @current-change="handleCurrentChange"
       background
      :current-page="page"
      :page-size="limit"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>        
    </div>
</template>

<script>
export default {
    data () {
        return {
            //默认显示的类容
            activeName:'1',
            //歌曲表格数据
            resultList:[],
            //歌单数据
            songList:[],
            //mv数据
            mvList:[],
            //获取的条数
            limit:10,
            //总条数
            total:0,
            //默认页
            page:1
        }
    },
    watch:{
      activeName () {
          this.getResultList ()
          this.page = 1
      },
      //监听搜索框的类容改变调用getResultList()函数
      '$route.query.keywords': 'getResultList'
    },
    created() {
       this.getResultList() 
    },
    methods:{
       async getResultList () {
          const res = await this.$http.get('https://autumnfish.cn/search',{
              params:{
                  keywords:this.$route.query.keywords,
                  type:this.activeName,
                  limit:this.limit,
                  offset:(this.page-1)*this.limit
                }})
                if(res.data.code == 200){
                    if(this.activeName == '1'){
                       this.resultList = res.data.result.songs
                       this.total = res.data.result.songCount
                    }else if(this.activeName == '1000'){
                      this.songList = res.data.result.playlists
                      this.total = res.data.result.playlistCount
                    }else{
                        this.mvList = res.data.result.mvs
                        this.total = res.data.result.mvCount
                    }
                }
                console.log(this.songList)
        },
      async playMise (id) {
          const res = await this.$http.get('https://autumnfish.cn/song/url',{params:{id}})
          console.log(res)
          if(res.data.code == 200){
             let url = res.data.data[0].url
             this.$parent.url = url
          }
       },
       //页面数改变触发
       handleCurrentChange (newPage) {
            this.page = newPage
            this.getResultList()
        
       },
       handleClick () {
           console.log(this.activeName)
       },
       //歌单id
       toPlaylist (id) {
          console.log(id)
          this.$router.push(`playlist?id=${id}`)
       },
       playMv (id) {
          this.$router.push(`/mv?id=${id}`)
       }
    }
}
</script>

<style lang="less" scoped>
    .result-container{
       .title_wrap{
           display: flex;
           align-items: flex-end;
           h2{
               margin-right: 10px;
           }
           span{
               color: grey;
           }
       } 
       .pane2{
          .items{
                display: flex;
                flex-wrap: wrap;
              .item{
                      width: 200px;
                      cursor: pointer;
                      margin-right: 20px;
                      margin-bottom: 20px;
                .img_box{
                    width: 100%;
                    position: relative;
                    .img_text{
                      position: absolute;
                      right: 5px;
                      top: 0;
                      color: white;
                    }
                    img{
                        width: 100%;
                        border-radius: 5px;
                    }
                    p{
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        margin-left: -20px;
                        margin-top: -20px;
                        background: white;
                        font-size: 35px;
                        text-align: center;
                        line-height: 40px;
                        opacity: 0;
                        color: #dd6d60;
                    }
                    
                } 
                .img_box:hover p {
                    opacity: 1;
                }
                .text{} 
              }
          } 
       }
       .pane3{
          .items{
              display: flex;
              flex-wrap: wrap;
             .item{
                    width: 250px;
                    cursor: pointer;
                    margin-right: 20px;
                    margin-bottom: 20px;
                .img_box{
                    width: 100%;
                    position: relative;
                   .img_text{
                       position: absolute;
                       right: 5px;
                       top: 0;
                       color: white;
                       font-size: 23px;
                       display: flex;
                       align-items: center;
                       span{
                           font-size: 16px;
                       }
                   }
                   img{
                       width: 100%;
                       border-radius: 5px;
                   }
                   p{
                       position: absolute;
                       left: 50%;
                       top: 50%;
                       width: 40px;
                       height: 40px;
                       margin-top: -20px;
                       margin-left: -20px;
                       background: white;
                       color:#dd6d60;
                       border-radius: 50%;
                       font-size: 35px;
                       text-align: center;
                       line-height: 40px;
                       opacity: 0;
                   }
                   .sp1{
                       position: absolute;
                       right: 5px;
                       bottom: 5px;
                       color: white;
                   } 
                } 
                .text{
                    font-size: 15px;
                   .name{}
                   .singer{
                       color: grey;
                   } 
                }
                .img_box:hover p{
                    opacity: 1;
                }
             } 
          } 
       }
    }
    .el-tabs{
        margin-top: 25px;
        span{
            cursor: pointer;
            margin-right: 10px;
        }
    }
</style>